<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <!-- Banner -->
      <ServicesBanner :params="bannerParams" />

      <section>
        <div class="max-w-275 mx-auto py-12 px-6">
          <div class="flex flex-col md:flex-row items-center md:items-center gap-12">
            <div class="relative w-1/2">
              <swiper-container
                :slides-per-view="1"
                :loop="true"
                :navigation="navigation"
                :autoplay="{
                  delay: 7000
                }"
              >
                <swiper-slide class="flex justify-center items-center h-96">
                  <figure>
                    <img
                      class="object-center object-cover"
                      src="/src/images/quality-control/inspection-process/inspection-process-1-1.webp"
                      alt=""
                    />
                  </figure>
                </swiper-slide>

                <swiper-slide class="flex justify-center items-center h-96">
                  <figure>
                    <img
                      class="object-center object-cover"
                      src="/src/images/quality-control/inspection-process/inspection-process-1-2.webp"
                      alt=""
                    />
                  </figure>
                </swiper-slide>
              </swiper-container>
              <!-- 自定义导航按钮（可选） -->
              <div class="my-button-prev">
                <svg
                  t="1734517217785"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2929"
                  width="25"
                  height="25"
                >
                  <path
                    d="M424.5248 512l313.344-309.7088a58.0352 58.0352 0 0 0 0-82.752 59.6864 59.6864 0 0 0-83.7248 0l-355.2 351.0912a58.0352 58.0352 0 0 0 0 82.7392l355.2 351.104a59.6864 59.6864 0 0 0 83.712 0 58.0352 58.0352 0 0 0 0-82.7648L424.512 512z"
                    fill="#2F2F2F"
                    p-id="2930"
                  ></path>
                </svg>
              </div>
              <div class="my-button-next">
                <svg
                  t="1734517228232"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3095"
                  width="25"
                  height="25"
                >
                  <path
                    d="M612.2752 512l-313.344 309.7088a58.0352 58.0352 0 0 0 0 82.752 59.6864 59.6864 0 0 0 83.7248 0l355.2-351.0912a58.0352 58.0352 0 0 0 0-82.7392l-355.2-351.104a59.6864 59.6864 0 0 0-83.712 0 58.0352 58.0352 0 0 0 0 82.7648L612.288 512z"
                    fill="#2F2F2F"
                    p-id="3096"
                  ></path>
                </svg>
              </div>
            </div>

            <div
              class="text-[#5F5F5F] text-4 tracking-normal leading-6 text-justify space-y-4 w-1/2"
            >
              <p>
                We attach great importance to the quality of customer parts. Quality control
                inspections at various stages of the production process help monitor product
                quality. At Maxprecise Global, we provide a wide range of quality inspection services and
                conduct multiple inspections at every step from raw materials entering the factory
                to finished products. We are committed to ensuring that all parts you order are
                delivered on time and meet your quality expectations.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-12 px-6 space-y-8">
          <!-- 标题 -->
          <h2 class="text-center text-[#54595F] text-8 tracking-normal leading-14 font-bold">
            Quapty Inspection Capabipties
          </h2>

          <!-- 图标网格 -->
          <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- 单个能力展示 -->
            <div
              v-for="(item, index) in capabipties"
              :key="index"
              class="flex items-center space-x-4"
            >
              <!-- 图标 -->
              <div class="w-12 h-12 flex items-center justify-center" v-html="item.svgIcon" />
              <!-- 文本内容 -->
              <div>
                <p class="text-gray-600 text-sm">{{ item.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-12 px-6">
          <h2 class="text-center text-[#54595F] text-8 tracking-normal leading-14 font-bold mb-4"
          >Quapty Control</h2
          >
          <div class="flex flex-col md:flex-row items-center md:items-center gap-6">

            <div class="flex-1">

              <div class="text-[#5F5F5F] text-4 tracking-normal leading-6 text-justify space-y-4">
                <p>
                  After the order is confirmed, we will provide a DFM report and review all
                  tolerances and appearance specifications.
                </p>
                <p>
                  Inspect all incoming materials and provide COA (Certificate of Analysis) for raw
                  materials.
                </p>
                <p> After T1 samples, we will provide a full-size inspection report. </p>
                <p>
                  Project engineers will carefully inspect dimensions, tolerances, and appearance
                  during manufacturing.
                </p>
                <p> Provide quapty inspection reports before shipment. </p>
              </div>
            </div>

            <div class="flex-1 max-w-sm md:max-w-md">
              <img
                src="/src/images/quality-control/inspection-process/quapty-control.webp"
                alt="Quapty Control"
                class="rounded-sm shadow-md border border-gray-200"
              />
            </div>
          </div>

          <div class="mt-6">
            <p class="text-[#5F5F5F] text-4 tracking-normal leading-6 text-justify">
              Blue ray scanning is an important part of quapty assurance, prototype design,
              manufacturing, and reverse engineering. It is widely used in various industries and
              can measure object sizes, surface finishes, and shape complexity.
            </p>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-12 px-6 text-center">
          <div class="text-[#54595F] text-8 tracking-normal leading-14 font-bold">Features</div>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-12 mt-8">
            <div class="flex flex-col items-center space-y-2">
              <img
                src="/src/images/quality-control/inspection-process/features-1.webp"
                alt=""
                class="w-12 h-12 object-fill"
              />
              <span class="text-[#5F5F5F] text-4 tracking-normal leading-6 font-semibold">
                High Efficient
              </span>
            </div>
            <div class="flex flex-col items-center space-y-2">
              <img
                src="/src/images/quality-control/inspection-process/features-2.webp"
                alt=""
                class="w-12 h-12 object-fill"
              />
              <span class="text-[#5F5F5F] text-4 tracking-normal leading-6 font-semibold">
                High Accuacy up to 0.01mm
              </span>
            </div>
            <div class="flex flex-col items-center space-y-2">
              <img
                src="/src/images/quality-control/inspection-process/features-3.webp"
                alt=""
                class="w-12 h-12 object-fill"
              />
              <span class="text-[#5F5F5F] text-4 tracking-normal leading-6 font-semibold">
                Hole Flash Capture Technology
              </span>
            </div>
            <div class="flex flex-col items-center space-y-2">
              <img
                src="/src/images/quality-control/inspection-process/features-4.webp"
                alt=""
                class="w-12 h-12 object-fill"
              />
              <span class="text-[#5F5F5F] text-4 tracking-normal leading-6 font-semibold">
                High Adaptability
              </span>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-12 px-6">
          <div class="flex flex-col md:flex-row items-center md:items-center gap-6">
            <div class="flex-1 max-w-sm md:max-w-md">
              <img
                src="/src/images/quality-control/inspection-process/inspection-process-2.webp"
                alt="Quapty Control"
                class="rounded-sm shadow-md object-cover object-center"
                style="width: 448px; height: 336px"
              />
            </div>

            <div class="flex-1">
              <div class="text-[#5F5F5F] text-4 tracking-normal leading-6 text-justify space-y-4">
                <p>
                  XRF is a non-destructive analysis technique used to determine the elemental
                  composition of materials.
                </p>
                <p>
                  It provides fast and accurate elemental analysis and alloy identification for
                  high-throughput XRF testing. It is used for quality control of incoming materials
                  and quality monitoring of finished products.
                </p>
                <p>
                  The XRF analyzer can also detect prohibited materials under REACH and RoHS
                  regulations.
                </p>
                <p>
                  Due to the non-destructive and rapid analysis of samples by X-ray fluorescence
                  analysis, it can be widely used in manufacturing and quality control.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section>
        <div class="max-w-275 mx-auto py-12 px-6">
          <div class="flex flex-col md:flex-row items-center md:items-center gap-6">
            <div class="flex-1">
              <div class="text-[#5F5F5F] text-4 tracking-normal leading-6 text-justify space-y-4">
                <p>
                  The XRF analyzer can measure elements magnesium (Mg) to uranium (U), ranging from
                  parts per million to 100%.
                </p>
                <p>
                  As a common X-ray technique, XRF can measure multiple elements. The main
                  advantages are as follows:
                </p>
                <p> XRF is a fast process that can quickly obtain accurate data after testing. </p>
                <p>
                  It is usually non-destructive, so we can test sample materials without posing any
                  risk to them
                </p>
                <p>
                  This is a highly adaptable technology that can be used on-site in different
                  locations.
                </p>
              </div>
            </div>

            <div class="flex-1 max-w-sm md:max-w-md">
              <img
                src="/src/images/quality-control/inspection-process/inspection-process-3.webp"
                alt="Quapty Control"
                class="rounded-sm shadow-md object-cover object-center"
                style="width: 448px; height: 336px"
              />
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import Header from '/src/components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import ServicesBanner from '/src/components/ServicesBanner.vue'


import banner from '/src/images/quality-control/banner-inspection-process.webp'


const bannerParams = {
  title: 'The Inspection Process',
  subtitle: ['Coordinate Measuring Machine (CMM)', 'Quadratic Element Measuring Instrument'],
  imgUrl: banner
}

const capabipties = [
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><circle cx="73.54" cy="38.8164" r="10" fill="#16BC9C" stroke="#16BC9C" stroke-width="2"></circle><path d="M58 50.7101V26.9735H69.8799C70.7835 26.9735 71.5161 26.6544 71.5161 25.8551C71.5161 24.3322 71.6732 23.4104 69.9966 22.4696L57.4876 15.4503C56.9634 15.1562 56.3555 15 55.7348 15H37.9749C36.1676 15 35 16.296 35 17.8947V21.513L27.8197 21.513C27.072 21.513 26.7161 22.3272 27.2694 22.7722L35 26.5788V47.7101" stroke="#0D0B70" stroke-width="2"></path><path d="M35.0001 47.2379V83.0004C35.0001 84.105 35.8955 85.0004 37.0001 85.0004H55.7505C56.8551 85.0004 57.7505 84.105 57.7505 83.0004V50.9996" stroke="#0D0B70" stroke-width="2"></path><pne x1="44.9612" y1="40.8164" x2="57.8557" y2="40.8164" stroke="#0D0B70" stroke-width="2"></pne><pne x1="44.8823" y1="29.5" x2="57.7768" y2="29.5" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.4087" y1="46.3418" x2="57.856" y2="46.3418" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.3296" y1="35.0254" x2="57.7769" y2="35.0254" stroke="#0D0B70" stroke-width="2"></pne><pne x1="43.9612" y1="71.8672" x2="56.8557" y2="71.8672" stroke="#0D0B70" stroke-width="2"></pne><pne x1="51.3296" y1="77.3926" x2="57.7769" y2="77.3926" stroke="#0D0B70" stroke-width="2"></pne><path d="M56.3069 66.3666L38.5622 66.3666C36.5275 66.3666 34.8781 64.7172 34.8781 62.6825L34.8781 58.9498H28.0828C27.2375 58.9498 26.8387 57.9064 27.4684 57.3426L34.8778 50.709L70.691 50.709C71.7084 50.709 72.5331 51.5337 72.5331 52.5511V54.8472C72.5331 56.1177 71.8785 57.2986 70.8009 57.9718L58.2589 65.807C57.6735 66.1727 56.9972 66.3666 56.3069 66.3666Z" fill="#F0F4F5" stroke="#0D0B70" stroke-width="2"></path></svg>`, // 替换为实际图标路径
    description: 'Surface Roughness Measuring Instrument'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 71 70" fill="none"><path d="M5.3125 43.5V14.2812L9.5625 10.0312V2.0625H12.75V42.9688" stroke="#0D0B70" stroke-width="2"></path><path d="M63.75 43.5V14.2812L59.5 10.0312V2.0625H56.3125V43.5" stroke="#0D0B70" stroke-width="2"></path><path d="M29.75 16.9375V1H40.375V16.9375L35.0625 22.25L29.75 16.9375Z" stroke="#0D0B70" stroke-width="2"></path><path d="M5.3125 53.0625V69H16.37L21.109 64.2188H48.4895L53.2284 69H63.75V53.0625" stroke="#0D0B70" stroke-width="2"></path><rect x="1" y="43.4375" width="68.125" height="10.75" stroke="#0D0B70" stroke-width="2"></rect><pne x1="12.75" y1="17" x2="29.75" y2="17" stroke="#0D0B70" stroke-width="2"></pne><pne x1="12.75" y1="9.5625" x2="29.75" y2="9.5625" stroke="#0D0B70" stroke-width="2"></pne><pne x1="40.375" y1="17" x2="57.375" y2="17" stroke="#0D0B70" stroke-width="2"></pne><pne x1="40.375" y1="9.5625" x2="57.375" y2="9.5625" stroke="#0D0B70" stroke-width="2"></pne><circle cx="35.0625" cy="32.875" r="9.5625" fill="#16BC9C"></circle></svg>`,
    description:
      'A wide range of gauges (telescoping, bore, height, surface roughness, feeler, thread, pin)'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><path d="M21 56V16H28V56" stroke="#0D0B70" stroke-width="2"></path><path d="M80 56V16H72V56" stroke="#0D0B70" stroke-width="2"></path><path d="M21 64V83H79V64" stroke="#0D0B70" stroke-width="2"></path><circle cx="68" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><circle cx="32" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><circle cx="50" cy="73" r="3" stroke="#0D0B70" stroke-width="2"></circle><rect x="16" y="57" width="68" height="6" stroke="#0D0B70" stroke-width="2"></rect><pne x1="28" y1="32" x2="35" y2="32" stroke="#0D0B70" stroke-width="2"></pne><pne x1="65" y1="32" x2="71" y2="32" stroke="#0D0B70" stroke-width="2"></pne><rect x="36" y="29" width="28" height="6" stroke="#0D0B70" stroke-width="2"></rect><circle cx="50" cy="46" r="10" fill="#16BC9C"></circle></svg>`,
    description: 'Testing devices for stress, impact, hardness, mold flow index'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 100 100" fill="none"><circle cx="69" cy="35" r="20" stroke="#0D0B70" stroke-width="2"></circle><circle cx="69" cy="35" r="24" stroke="#0D0B70" stroke-width="2"></circle><circle cx="69.4795" cy="35.0237" r="3.1087" stroke="#0D0B70" stroke-width="2"></circle><path d="M63 29L67.2426 33.2426" stroke="#0D0B70" stroke-width="2"></path><circle cx="55" cy="32" r="2" fill="#0D0B70"></circle><circle cx="59" cy="24" r="2" fill="#0D0B70"></circle><circle cx="80" cy="24" r="2" fill="#0D0B70"></circle><circle cx="69" cy="20" r="2" fill="#0D0B70"></circle><circle cx="83" cy="41" r="2" transform="rotate(-180 83 41)" fill="#0D0B70"></circle><circle cx="56" cy="41" r="2" transform="rotate(-180 56 41)" fill="#0D0B70"></circle><circle cx="84" cy="32" r="2" fill="#0D0B70"></circle><pne x1="16.9612" y1="70" x2="29.8557" y2="70" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="76" x2="29.856" y2="76" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="52" x2="29.856" y2="52" stroke="#0D0B70" stroke-width="2"></pne><pne x1="23.4087" y1="40" x2="29.856" y2="40" stroke="#0D0B70" stroke-width="2"></pne><pne x1="16.9612" y1="58" x2="29.8557" y2="58" stroke="#0D0B70" stroke-width="2"></pne><pne x1="16.9612" y1="46" x2="29.8557" y2="46" stroke="#0D0B70" stroke-width="2"></pne><pne x1="24.3296" y1="64" x2="30.7768" y2="64" stroke="#0D0B70" stroke-width="2"></pne><rect x="14" y="10" width="16" height="72" stroke="#0D0B70" stroke-width="2"></rect><rect x="11" y="16" width="24" height="18" fill="#F0F4F5" stroke="#0D0B70" stroke-width="2"></rect><rect x="14" y="19" width="18" height="12" fill="#16BC9C"></rect><rect x="35" y="22" width="4" height="6" rx="1" stroke="#0D0B70" stroke-width="2"></rect><rect x="30" y="70" width="40" height="12" stroke="#0D0B70" stroke-width="2"></rect></svg>`,
    description: 'Coordinate Measuring Machine (CMM)'
  },
  {
    svgIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 70 58" fill="none"><path d="M9.35794 7.68461L13.3074 11.9379C14.2535 12.9567 15.581 13.5356 16.9714 13.5356L33.3811 13.5356C35.5121 13.5356 37.4089 12.185 38.106 10.1712L40.7028 2.66943" stroke="#0D0B70" stroke-width="2"></path><path d="M1 20.2866C1 19.1623 1.37892 18.0709 2.07559 17.1884L12.0365 4.57121C12.9847 3.37016 14.4307 2.66943 15.961 2.66943H48.118C50.9271 2.66943 53.185 4.98302 53.1165 7.79135L52.9425 14.9265C52.8763 17.6397 50.6579 19.8046 47.944 19.8046H37.5358C35.3239 19.8046 33.3749 21.2579 32.7437 23.3778L23.7963 53.4274C23.1651 55.5473 21.2161 57.0005 19.0043 57.0005H16.9815C13.6124 57.0005 11.2075 53.7362 12.2061 50.5185L18.6117 29.8783C19.6686 26.4727 16.078 23.4908 12.9244 25.1552L10.5154 26.4266C8.00689 27.7506 4.97 27.5683 2.63787 25.9537V25.9537C1.61209 25.2436 1 24.0753 1 22.8277V20.2866Z" stroke="#0D0B70" stroke-width="2"></path><pne x1="47.9721" y1="2.66943" x2="47.9721" y2="19.3867" stroke="#0D0B70" stroke-width="2"></pne><path d="M32.9823 24.0645L33.1541 24.116C35.2699 24.7513 36.4701 26.9816 35.8347 29.0974L34.5297 33.4436C33.8943 35.5594 31.6641 36.7596 29.5483 36.1243L29.3765 36.0727L32.9823 24.0645Z" stroke="#0D0B70" stroke-width="2"></path><path d="M56.1682 7.6869C61.1834 7.6869 62.8551 4.34345 62.8551 4.34345C62.8551 4.34345 64.9448 1 69.542 1" stroke="#16BC9C" stroke-width="2"></path><path d="M56.1682 12.6989C61.1834 12.6989 62.8551 9.35541 62.8551 9.35541C62.8551 9.35541 64.9448 6.01196 69.542 6.01196" stroke="#16BC9C" stroke-width="2"></path><path d="M56.1682 17.7206C61.1834 17.7206 62.8551 14.3771 62.8551 14.3771C62.8551 14.3771 64.9448 11.0337 69.542 11.0337" stroke="#16BC9C" stroke-width="2"></path></svg>`,
    description: 'XRF Material Verification Gun'
  }
]

const navigation = {
  enabled: true,
  prevEl: '.my-button-prev',
  nextEl: '.my-button-next'
}
</script>

<style scoped>
:deep(.my-button-prev) {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}

:deep(.my-button-next) {
  position: absolute;
  top: 50%;
  right: 0;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 10;
}
</style>
